<template>
  <div>
      <ul class="list">
          <!-- 我们不用data循环了，而是用datas(请求的模拟数据) -->
          <div v-for="item in datas" :key="item.title">
            <li @click="getTitleHandle(item.title)">{{item.title}}</li>
          </div>
          
      </ul>
  </div>
</template>
<script>
export default {
  name: 'list',
  props:["data"],
  data(){
      return {

      }
  },
  methods: {
      getTitleHandle(title){
          this.$emit('changeTitle', title);
      }
  },





  // 如果你会Vuex，我们在created中请求数据
  created () {
    // 请求模拟数据请在Vuex中查看
    this.$store.dispatch('getList');
  },
  // 然后在计算属性里拿到请求的数据
  computed: {
      // 这里我们不用写死的dataList了，而是使用Vuex中请求的模拟数据
      datas(){
          return this.$store.state.list
      }
  }


}
</script>
<style scoped>
    * {
        text-align: center;
    }
    ul {
        margin: 0;
        padding: 0;
    }
    li {
        margin: 5px 0;
        padding: 10px;
        border-radius: 5px;
        display: inline-block;
        cursor: pointer;
        list-style: none;
        background-color: #eee;
    }
    li:hover {
        background-color: orange;
    }
</style>
